<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{width: 100px;height: 100px;
            background-color: rosybrown;
        float: left}
        .box2{width: 200px;height: 200px;
            background-color: greenyellow;}
        .box3{
            width: 200px;
            height: 200px;
            background-color: saddlebrown;
            float: left;
        }
    </style>
</head>
<body>
<!--
浮动性质1:元素脱标
元素脱标的意思是,表明了浮动的元素
会脱离标准的文档流
-->
<!--box2由于没有设置浮动,于是
box2 现在变成了 标准文档流的第一个元素
而box1 从标准文档流中脱离出去 ,并且在另一个层面
上进行排列-->
<div class="box1"></div>
<div class="box2"></div>
<hr>
<!--原本不能设置宽高的 span 标签由于浮动脱离了标准文档流
并且它可以设置宽高了,实际上,是html将其转换成块元素来渲染的
并且还能在一行,可以认为,浮动起来的元素 没有行内元素和块元素这样的
分类了 -->
<span class="box3">人生只有走出来的美丽,没有登出来的辉煌</span>
</body>
</html>